import { createFileRoute } from "@tanstack/react-router";
import { IssueDistribution } from "@/components/dashboard/issue-distribution";
import { Issues } from "@/components/dashboard/issues";
import { PassedTrending } from "@/components/dashboard/passed-trending";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

export const Route = createFileRoute("/_app/")({
  component: App,
});

function App() {
  return (
    <div className="flex h-full w-full flex-col gap-4">
      <div className="grid grid-cols-5 gap-4">
        <Select defaultValue="Pytest-example">
          <SelectTrigger className="w-full border-border uppercase" size="sm">
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectLabel>Task</SelectLabel>
              <SelectItem value="Pytest-example" className="uppercase">
                pytest-example
              </SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>
        <ToggleGroup
          variant="outline"
          type="single"
          className="col-start-5 col-end-5 justify-self-end"
          defaultValue="m"
        >
          <ToggleGroupItem value="m" aria-label="Toggle month" className="h-8">
            M
          </ToggleGroupItem>
          <ToggleGroupItem value="y" aria-label="Toggle year" className="h-8">
            Y
          </ToggleGroupItem>
        </ToggleGroup>
      </div>
      <Issues />
      <div className="grid flex-1 grid-rows-2 gap-4">
        <PassedTrending />
        <IssueDistribution />
      </div>
    </div>
  );
}
